import {Article} from "../../model/Article.ts";
import {useNavigate} from "react-router-dom";

const MessageCard = (props: {article: Article}) => {

    const {article} = props
    const navigate = useNavigate()
    const handleNavigate = () => {
        navigate(`/article?articleId=` + article.articleId, {replace: true});
    }





    return (
        <>
            <div className="col mt-3">
                <div className="card" onClick={handleNavigate}>

                    <img className="bd-placeholder-img card-img-top image-holder crop-image card-image"
                         src={"http://127.0.0.1:5000" + article.imageUrl} alt=""
                         width="100%" height="225"/>
                    <div className="card-body">
                        <p className="mb-0 title-large message-title">{article.title}</p>
                        <p className="text-secondary p-0 mt-1">{article.subtitle}</p>

                        <div className="row">

                            <small className={"text-secondary card-text-time"}></small>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default MessageCard